<template>
    <div class="see-trr">

        <input v-model="searchValue" class="search-input" placeholder="搜索" />

        <div style="height: 60px;"></div>

        <div class="the-tree">
            <div v-for="item in treeData">
                <div class="base-name">
                    <CaretRightOutlined @click="item.open = !item.open" class="jidi arrow"
                        :class="{ 'rotate': item.open }" :style="{ 'opacity': item.children.length == 0 ? '0' : '1' }" />
                    <HomeOutlined class="jidi" />
                    <div @click="select(item)" class="title">
                        <div v-if="item.title.indexOf(searchValue) > -1">
                            {{ item.title.substring(0, item.title.indexOf(searchValue)) }}
                            <span style="color: #f50">{{ searchValue }}</span>
                            {{ item.title.substring(item.title.indexOf(searchValue) + searchValue.length) }}
                        </div>
                        <div v-else>{{ item.title }}</div>

                    </div>
                </div>
                <div class="children" :style="{ 'max-height': item.open ? (42 * item.children.length) + 'px' : '0' }">
                    <div v-for="ch in item.children" class="land-name">
                        <CaretRightOutlined class="jidi" style="opacity: 0;" />
                        <HomeOutlined class="jidi" style="opacity: 0;" />
                        <div @click="select(ch)" class="title">
                            <div v-if="ch.title.indexOf(searchValue) > -1">
                            {{ ch.title.substring(0, ch.title.indexOf(searchValue)) }}
                            <span style="color: #f50">{{ searchValue }}</span>
                            {{ ch.title.substring(ch.title.indexOf(searchValue) + searchValue.length) }}
                        </div>
                        <div v-else>{{ ch.title }}</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { MapPoinitType } from '@/components/Amap/MapPointType';
import type { Land } from '@/types/Land';
import type { Base } from '@/types/Base';
import type { TreeProps } from 'ant-design-vue';
import { onMounted, ref, watch } from 'vue';
import { HomeOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
const props = defineProps<{
    baseList: Base[],
    landList: Land[]
}>()
const emit = defineEmits<{
    select: [MapPoinitType, Base | Land]
}>()
const expandedKeys = ref<any[]>([]);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true);
const treeData = ref<any[]>([]);

const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
};

watch(searchValue, value => {
   
    for (let base of treeData.value) {
        for (let land of base.children) {
            if (land.title.indexOf(searchValue.value) > -1) {
                base.open = true
            }
        }
    }

   
});

watch(() => props.baseList, () => {
    init()
})
watch(() => props.landList, () => {
    init()
})

const init = () => {
    let baseList = props.baseList.map(item => {
        return {
            key: Math.random(),
            title: item.name,
            children: [] as any[],
            open: false,
            type: MapPoinitType.BASE,
            data: item
        }
    })
    // let landList = props.landList.map(item => {
    //     return {
    //         key: Math.random(),
    //         title: item.name,
    //         children: [] as any[],
    //         type: MapPoinitType.LAND,
    //         data: item
    //     }
    // })

    // for (let base of baseList) {

    //     for (let land of landList) {
    //         if (land.data.baseId == base.data.id) {
    //             base.children.push(land)
    //         }
    //     }
    // }
    treeData.value = baseList
    console.log(treeData.value)
}

const select = (record: any) => {

    emit('select', record.type, record.data)
}

onMounted(() => {
    init()
})

</script>
<style scoped>
.see-trr {
    position: relative;
    height: 100%;

}

.search-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    background: rgba(9, 36, 44, 0.4);
    border: 1px solid #43e7ff;

    color: #fff;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
}

.search-input::placeholder {
    color: #2cd7bc;
    /* 红色 */
}

.the-tree {
    color: #fff;
    height: 90%;
    overflow-y: scroll;
    font-size: 16px;
}

.base-name {
    margin: 10px;
    cursor: pointer;
}

.land-name {
    margin: 10px;
    cursor: pointer;
}

.children {
    transition: 0.5s;
    max-height: 0;
    overflow: hidden;
}

.jidi {
    margin: 0 10px 0 0;
    /* color: #fff; */
}

.arrow {
    transition: 0.5s;
}

.rotate {
    transform: rotateZ(90deg);
}

.title {
    display: inline-block;
    vertical-align: middle;
}
</style>
